<template>
    <view class="page">
        <!-- <u-navbar :back-icon-color="'#ffffff'" :title-color="'#ffffff'"
                    :background="background"></u-navbar> -->
        <!-- 订单状态 -->
        <view class="order-status">
            <view class="back" @click="onBack">
                <text></text>
            </view>
            <view class="status">
                
                <image v-if="data.orders_state=='0'" :src="$imgUrl+'order/obligation.png'" mode="widthFix"></image>
                <image v-else-if="data.orders_state=='2'" :src="$imgUrl+'order/truck.png'" mode="widthFix"></image>
                <text v-else class="iconfont icon-zhuyi"></text>
                <text>{{selectDictLabel(stateList,data.orders_state)}}</text>
            </view>
            <!-- <view class="reason">
                <text>剩余12分68秒</text>
            </view> -->
        </view>
        <!-- 收货地址 -->
        <view class="shipping-address" v-if="data.send.address_id">
            <view class="name-phone">
                <text class="iconfont icon-dingwei"></text>
                <text>{{data.send.address_name}}</text>
                <text>{{ data.send.address_mobile }}</text>
            </view>
            <view class="address">
                <text>{{ data.send.address_province + data.send.address_city + data.send.address_area + data.send.address_detailed }}</text>
            </view>
        </view>
        <!-- 订单商品 -->
        <view class="order-goods">
            <view class="goods-list">
                <view class="list" v-for="(item,index) in data.lists" :key="index">
                    <view class="listt">
                        <view class="thumb">
                            <image :src="item.goods_cover" mode="widthFix"></image>
                        </view>
                        <view class="item">
                            <view class="tp">
                                <view class="tpl">
                                    <view class="title">
                                        <text>{{item.goods_name}}</text>
                                    </view>
                                    <view class="num-size">
                                        <text>{{item.specify}}</text>
                                    </view>
                                </view>
                                <view class="price">
                                    <text style="padding-bottom: 20rpx;">￥{{item.price_selling}}</text>
                                    <text>×{{ item.stock_sales }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- <view class="order-btn">
                        <view class="btn" @click="onApplyAftersales">
                            <text>申请售后</text>
                        </view>
                    </view> -->
                </view>
            </view>
            <!-- <view class="contact">
                <text class="iconfont icon-kefu"></text>
                <text>联系客服</text>
            </view> -->
        </view>
        <!-- 订单信息 -->
        <view class="order-info">
            <view class="info-list">
                <view class="list">
                    <view class="title">订单编号:</view>
                    <view class="content">
                        <text>{{data.order_no}}</text>
                        <text class="btn" @tap="copy()">复制</text>
                    </view>
                </view>
                <view class="list">
                    <view class="title">下单时间:</view>
                    <view class="content">
                        <text>{{data.create_time}}</text>
                    </view>
                </view>
                <view class="list">
                    <view class="title">支付方式:</view>
                    <view class="content">
                        <text>{{selectDictLabel(payType,data.pay_type)}}</text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 订单明细 -->
        <view class="order-details">
            <view class="details-list">
                <view class="list">
                    <view class="title">
                        <text>商品总额</text>
                    </view>
                    <view class="price">
                        <text>￥{{ data.total_price }}</text>
                    </view>
                </view>
                <view class="list">
                    <view class="title">
                        <text>优惠金额</text>
                    </view>
                    <view class="price">
                        <text>￥{{ data.coupon_price}}</text>
                    </view>
                </view>
                <view class="list">
                    <view class="title">
                        <text>运费</text>
                    </view>
                    <view class="price">
                        <text v-if="data.fee_price>0">￥{{data.fee_price}}</text>
                        <text v-else>包邮</text>
                    </view>
                </view>
                <view class="list action">
                    <view class="title">
                        <text>实付款：</text>
                    </view>
                    <view class="price">
                        <text>￥{{data.pay_price}}</text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 底部按钮 -->
        <view class="footer-btn">
            <view class="del">
                <!-- <text>删除订单</text> -->
            </view>
            <view class="btn">
                <text v-if="data.orders_state=='0'" @click="cancle">取消订单</text>
                <text v-if="data.orders_state=='0'" @click="toPay" class="action">立即付款</text>
                <text v-if="data.orders_state=='2'" @click="toReceive" class="action">确认收货</text>
                <text v-if="data.orders_state=='3'" @click="toComment" class="action">立即评价</text>
            </view>
        </view>
        <DialogBox ref="DialogBox"></DialogBox>
        <loading :show="loading"></loading>
    </view>
</template>
<script>
import { goodsOrederState, payType } from "@/api/dictionary.js"
import { getGoodsInfo, setGoodsOrderToCancel, setGoodsOrderToInitPay, setGoodsOrderToReceive } from "@/api/my/orderList.js"
export default {
    data() {
        return {
            loading: false,
            orderNo: "",
            data: {},
            stateList: goodsOrederState,
            payType:payType,
            $imgUrl: this.$imgUrl,
            background: {
                            // 渐变色
                            backgroundImage: 'linear-gradient(to bottom right, #2e996f, #3f99ab)'
                        },
        };
    },
    onLoad(params) {
        this.orderNo = params.orderNo
        this.getList()
    },
    methods: {
        /**
         * 返回点击
         */
        onBack() {
            uni.navigateBack();
        },
        getList() {
            this.loading = true
            getGoodsInfo({ order_no: this.orderNo }).then(res => {
                this.data = res.data
                this.data.lists.forEach(element => {
                    let newStr = element.goods_spec.replace(/::/g, ":")
                    element.specify = newStr.replace(/;;/g, ";")
                });
                console.log(this.data, "hahha")
                this.loading = false
            })
        },
        /**
         * 售后点击
         */
        onApplyAftersales() {
            uni.navigateTo({
                url: '/pages/AfterSaleType/AfterSaleType',
            })
        },
        /**
         * 取消订单
         */
        cancle() {
            this.$refs['DialogBox'].confirm({
                title: '提示',
                content: '是否要取消订单?',
                DialogType: 'inquiry',
                animation: 0
            }).then(() => {
                setGoodsOrderToCancel({ order_no: this.orderNo }).then(res => {
                    if (res.code == 1) {
                        uni.navigateBack({
                            delta: 1,
                        })
                        this.$message("已取消订单")
                    }
                })
            }).catch(err => {
                console.log(err);
            })
        },
        toReceive() {
            this.$refs['DialogBox'].confirm({
                title: '提示',
                content: '是否要确认收货?',
                DialogType: 'inquiry',
                animation: 0
            }).then(() => {
                setGoodsOrderToReceive({ order_no: this.orderNo }).then(res => {
                    if (res.code == 1) {
                        uni.navigateBack({
                            delta: 1,
                        })
                        this.$message("已确认收货~")
                    }
                })
            }).catch(err => {
                console.log(err);
            })
        },
        /**
         * 立即付款
         */
        toPay() {
            setGoodsOrderToInitPay({ order_no: this.orderNo }).then(res => {
                if (res.code == 1) {
                    let data = { ...res.data, ...{ pageType: 1 } }
                    uni.navigateTo({
                        url: '/pagesA/mall/cashierDesk?dataList=' + encodeURIComponent(JSON.stringify(data))
                    })
                }
            })
        },
        /**
         * 评价点击
         */
        onComment() {
            uni.navigateTo({
                url: '/pagesA/my/myEvaluatePush?data=' + encodeURIComponent(JSON.stringify(this.data))
            })
        },
        // 复制
        copy() {
            uni.setClipboardData({
                data: this.data.order_no,
                success: () => { }
            });
        },
    }
}
</script>

<style scoped lang="scss">
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}

/* 订单状态 */
.order-status {
   position: fixed;
      left: 0;
      top: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 200rpx;
      background: linear-gradient(to bottom right, #2e996f, #3f99ab);
      /* #ifdef APP-PLUS */
      height: calc(100rpx + var(--status-bar-height));
      padding-top: var(--status-bar-height);
      /* #endif */
      /* #ifdef MP-WEIXIN */
      height: calc(100rpx + var(--status-bar-height));
      padding-top: 20rpx;
       /* #endif */
  // width: 100%;
  // height: 200rpx;
  // background: linear-gradient(to right, $base, $change-clor);
  // display: flex;
  // flex-direction: column;
  // align-items: center;
  // justify-content: center;
  .back {
    position: absolute;
    left: 0;
    top: 0;
    /* #ifdef APP-PLUS */
    padding-top: var(--status-bar-height);
    /* #endif */
    /* #ifdef MP-WEIXIN */
    padding-top: 20rpx;
    /* #endif */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100rpx;
    height: 100%;
    text {
      width: 20rpx;
      height: 20rpx;
      border-left: 2rpx solid #ffffff;
      border-bottom: 2rpx solid #ffffff;
      transform: rotate(45deg);
    }
    }
  .status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100rpx;
    image {
      width: 52rpx;
      margin-right: 20rpx;
    }
    text {
      font-size: 38rpx;
      // font-weight: bold;
      color: #ffffff;
    }
    .iconfont {
      margin-right: 20rpx;
    }
  }
  .reason {
    display: flex;
    // align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;
    text {
      font-size: 28rpx;
      color: #f6f6f6;
    }
  }
}

/* 收货地址 */
.shipping-address {
  width: 100%;
  //   height: 200rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  margin: 180rpx auto 20rpx;
  padding: 20rpx 0;
  .name-phone {
    display: flex;
    align-items: center;
    padding: 0 4% 10rpx;
    text {
      font-size: 28rpx;
      font-weight: bold;
      color: #222222;
      margin-right: 20rpx;
    }
  }
  .address {
    display: flex;
    padding: 0 4%;
    margin-left: 50rpx;
    text {
      font-size: 26rpx;
      color: #959595;
    }
  }
}

/* 订单商品 */
.order-goods {
  width: 100%;
  background-color: #ffffff;
  border-radius: 20rpx;
  .goods-list {
    padding: 20rpx 4% 0;
    .list {
      width: 100%;
      padding: 0 0 20rpx;
      .listt {
        display: flex;
        align-items: center;
        .thumb {
          display: flex;
          width: 22%;
          image {
            width: 120rpx;
            height: 120rpx;
            border-radius: 10rpx;
          }
        }
        .item {
          width: 75%;
          .tp {
            display: flex;
            align-items: center;
            .tpl {
              width: 80%;
              text {
                display: block;
              }
              .title {
                display: flex;
                align-items: center;
                padding-bottom: 20rpx;
                text {
                  font-size: 26rpx;
                  color: #222222;
                }
              }
              .num-size {
                text {
                  font-size: 26rpx;
                  color: #959595;
                  margin-right: 20rpx;
                }
              }
            }
            .price {
              //   display: flex;
              //   flex-direction: column;
              text {
                display: block;
                font-size: 24rpx;
                color: #959595;
                text-align: right;
              }
            }
          }
        }
      }
      .order-btn {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        height: 100rpx;
        .btn {
          padding: 10rpx 30rpx;
          color: #555555;
          font-size: 26rpx;
          border: 2rpx solid #eeeeee;
          border-radius: 100rpx;
        }
      }
    }
  }
  .contact {
    display: flex;
    align-items: center;
    justify-content: center;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100rpx;
    background-color: #ffffff;
    box-shadow: 0 0 20rpx #eeeeee;
    border-radius: 0 0 20rpx 20rpx;
    text {
      font-size: 28rpx;
      color: #555555;
    }
    .iconfont {
      font-size: 34rpx;
      margin-right: 20rpx;
    }
  }
}

/* 订单信息 */
.order-info {
  width: 100%;
  background-color: #ffffff;
  border-radius: 20rpx;
  margin: 20rpx auto;
  .info-list {
    padding: 0 4%;
    .list {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100rpx;
      border-bottom: 2rpx solid #f6f6f6;
      .title {
        font-size: 26rpx;
        color: #959595;
      }
      .content {
        display: flex;
        align-items: center;
        margin-left: 20rpx;
        text {
          font-size: 26rpx;
          font-weight: bold;
          color: #222222;
        }
        .btn {
          padding: 6rpx 20rpx;
          background-color: #eeeeee;
          color: #555555;
          font-size: 24rpx;
          border-radius: 50rpx;
          margin-left: 40rpx;
        }
      }
    }
  }
}

/* 订单明细 */
.order-details {
  width: 100%;
  background-color: #ffffff;
  border-radius: 20rpx;
  margin: 20rpx auto;
  padding-bottom: 100rpx;
  .details-list {
    padding: 0 4%;
    .list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100rpx;
      border-bottom: 2rpx solid #f6f6f6;
      .title {
        font-size: 26rpx;
        color: #959595;
      }
      .price {
        font-size: 26rpx;
        font-weight: bold;
      }
    }
    .action {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .price {
        font-size: 32rpx;
        font-weight: bold;
        color: #e8380d;
      }
    }
  }
}

.footer-btn {
  position: fixed;
  z-index: 2;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  border-top: 2rpx solid #eeeeee;
  padding: 0 4%;
  .del {
    display: flex;
    align-items: center;
    text {
      padding: 10rpx 30rpx;
      font-size: 24rpx;
      font-weight: bold;
    }
  }
  .btn {
    display: flex;
    align-items: center;
    text {
      padding: 10rpx 30rpx;
      font-size: 24rpx;
      border: 2rpx solid #c0c0c0;
      border-radius: 100rpx;
      color: #c0c0c0;
      margin-left: 20rpx;
    }
    .action {
      color: #e8380d;
      border: 2rpx solid #e8380d;
    }
  }
}
/deep/.page-total{
    z-index: 10;
}
</style>
